<template>
<view class="miou-activity-box"
	:style="'height:'+windowHeight+'px'"
>
	<view class="mix-page-header" >
		<view class="content row" 
			:style="{
				paddingRight: headerPaddingRight + 'px',
				paddingTop: statusBarHeight + 'px',
				height: navigationBarHeight + statusBarHeight + 'px'
			}"
		>
			<view class="location-box flex text-black"  @tap="BackPage">
				<view class="cuIcon-back"></view>
			</view>
			<view class="search-wrap center" :style="{height: customHeight + 'px'}" >
				<view class="nav-list">
					<view class="nav z">
						<block v-for="(item, index) in navList" :key="index">
							<view class="cu-item"
								:class="index==tabCurrentIndex ? 'select' : ''"
								@tap="tabSelect"
								:data-index="index"
							>
								<view>{{ item.text }}</view>
								<view class="tab-dot bg-black"></view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 占位栏 -->
		<view :style="[{minHeight: navigationBarHeight+statusBarHeight+'px'}]"></view>
	</view>
		
		
		
		
		
	<!-- 显示区域 -->
	<swiper :current="tabCurrentIndex" 
		class="swiper-box"
		duration="300" 
		:style="[{height:'calc(100vh - '+ navigationBarHeight + 'px)'},{top: navigationBarHeight + 'px'}]"
		@change="changeTab">
		<swiper-item class="tab-content"  >
			<scroll-view 
				class="list-scroll-content" 
				scroll-y
				@scrolltolower="loadData"
			>
				
				<!-- 空白页 -->
				<empty v-if="navList[0].loaded === true && navList[0].list.length === 0"></empty>
				
				<!-- 活动列表 -->
				<view class="activity-list padding-top" v-else>
					<block v-for="(item,index) in navList[0].list" :key="index">
						<view class="act-box" @click.stop="jumpGame(item)">
							<view class="act-img">
								<image class="aimg" :src="item.gameimg" mode="widthFix"></image>
							</view>
							<view class="act-info">
								<view class="title text-cut">
									【{{gameType[item.gametype]}}】{{item.gamename}}
								</view>
								<view class="time">
									<image class="icon" src="/static/img/icon_game_time.png" mode="widthFix"></image>
									{{aformat.gTime(item.startdate, item.starttime)}}
								</view>
								<view class="address">
									<image class="icon" src="/static/img/icon_game_address.png" mode="widthFix"></image>
									<view class="shopname text-cut">{{item.shopname}}</view>
									<view class="distance">{{item.distance}}km</view>
								</view>
							</view>
						</view>
					</block>
					<uni-load-more :status="navList[0].loadingType"></uni-load-more>
				</view>
				
			</scroll-view>
		</swiper-item>
			
		
		
		<swiper-item class="tab-content"  >
			<scroll-view 
				class="list-scroll-content" 
				scroll-y
				@scrolltolower="loadData"
			>
				
				<empty v-if="navList[1].loaded === true && navList[1].list.length === 0"></empty>
				
				<view class="activity-list padding-top" v-else>
					<block v-for="(item,index) in navList[1].list" :key="index">
						<view class="act-box" >
							<view class="act-img">
								<image class="aimg" :src="item.gameimg" mode="widthFix"></image>
							</view>
							<view class="act-info">
								<view class="title text-cut">
									【{{gameType[item.gametype]}}】{{item.gamename}}
								</view>
								<view class="time">
									<image class="icon" src="/static/img/icon_game_time.png" mode="widthFix"></image>
									{{aformat.gTime(item.startdate, item.starttime)}}
								</view>
								<view class="address">
									<image class="icon" src="/static/img/icon_game_address.png" mode="widthFix"></image>
									<view class="shopname">{{item.shopname}}</view>
									<view class="distance">{{item.distance}}km</view>
								</view>
							</view>
						</view>
					</block>
					<uni-load-more :status="navList[1].loadingType"></uni-load-more>
				</view>
				
			</scroll-view>
		</swiper-item>
		
		
		
	</swiper>
	
	
</view>
</template>

<script module="aformat" lang="wxs">
	function gTime (startdate, starttime) {
		var Yy = startdate.substring(0,4) + '年'
		var Mm = startdate.substring(4,6) + '月'
		var Dd = startdate.substring(6,9) + '日'
		if(starttime) {
			var time = starttime.substring(0,2) + ':' + starttime.substring(2)
			return Yy + Mm + Dd+  " " + time
		}
		return Yy + Mm + Dd
	}
    module.exports = {
		gTime: gTime
    }
</script>

<script>
import ViewScenario from '@/components/box/ViewScenario.vue';
import ViewBusiness from '@/components/box/ViewBusiness.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import empty from "@/components/basics/empty.vue";
import { Game } from '@/models/game.js';
import { gameType } from '@/models/enum.js';

export default {
	name: 'myActivity',
	components: {
		ViewScenario,
		ViewBusiness,
		uniLoadMore,
		empty
	},
	data() {
		return {
			gameType: gameType,
			windowHeight: 667,
			tabCurrentIndex: 0,
			navList: [
				{
					id: 1,
					text: '我的活动',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					id: 2,
					text: '活动历史',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				}
			],
		};
	},
	computed: {
		statusBarHeight(){
			return this.systemInfo.statusBarHeight
		},
		navigationBarHeight(){
			return this.systemInfo.navigationBarHeight;
		},
		customWidth(){
			return this.systemInfo.custom.width;
		},
		customHeight(){
			return this.systemInfo.custom.height;
		},
		//小程序右侧需要留出气泡空间
		headerPaddingRight(){
			// #ifndef MP
			return 0;
			// #endif
			// #ifdef MP-WEIXIN
			return this.customWidth + 20;
			// #endif
		},
	},
	onLoad() {
		this.windowHeight = this.systemInfo.windowHeight
	},
	mounted() {
		
		this.loadData()
	},
	methods: {
		BackPage() {
			this.$backPage()
		},
		jumpGame(activity) {
			this.$jumpPages('activity', {
				gameid:	activity.gameid,
				gametype: activity.gametype,
				gameplanid:	activity.gameplanid,
			})
		},
		loadData(source){
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			
			if(source === 'tabChange' && navItem.loaded === true){
				//tab切换只有第一次需要加载数据
				return;
			}
			if(navItem.loadingType === 'loading'){
				//防止重复加载
				return;
			}
			navItem.loadingType = 'loading';
			
			switch(index) {
				case 0: 
					this.myActivity()
				break;	
				case 1: 
					this.myActivityhis()
				break;
			}	
		}, 
		//顶部tab点击
		tabSelect(e) {
			this.tabCurrentIndex = e.currentTarget.dataset.index;
		},
		//swiper 切换
		changeTab(e){
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		async myActivity() {
			let navItem = this.navList[0];
			navItem.pagenum = navItem.pagenum + 1
			let gameNewList = await Game.myActivity(navItem.pagenum)
			navItem.loaded = true
			gameNewList.forEach(item => {
				navItem.list.push(item)
			})
			if (gameNewList.length < 20) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		async myActivityhis() {
			let navItem = this.navList[1];
			navItem.pagenum = navItem.pagenum + 1
			let gameShopList = await Game.myActivityhis(navItem.pagenum)
			navItem.loaded = true
			gameShopList.forEach(item => {
				navItem.list.push(item)
			})
			if (gameShopList.length < 20) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
	}
}
</script>

<style lang="scss" scoped>
.mix-page-header{
	.content{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 95;
		width: 100%;
		background-color: #fff;
	}
	.location-box{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		padding: 0 24rpx;
		font-weight: 400;
		color: #000000;
	}
	.btn{
		width: 88rpx;
		height: 80rpx;
		padding: 10rpx 24rpx;
		position: relative;
	}
	.search-wrap{
		flex: 1;
		font-size: 14px;
		color: #999;
		/* #ifdef H5 */
		margin-right: 24rpx;
		/* #endif */
	}
}
	.list-scroll-content{
		height: 100%;
		.search-form{
			background-color: #f9f9f9;
		}
	}
	.nav-list{
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.nav.z{
			color: #666;
			.cu-item {
			    height: 80rpx;
			    line-height: 80rpx;
				font-weight: 400;
				font-size: 30rpx;
			    position: relative;
				&.select {
					color: #000;
					font-size: 32rpx;
					.tab-dot {
					    position: absolute;
					    height: 5rpx;
					    border-radius: 10px;
					    bottom: 0;
					    left: 0;
					    right: 0;
					    width: 72rpx;
					    margin: auto;
					}
				}
			}
		}
	}
	
.act-box{
	margin: 0 30rpx 30rpx;
	border-radius: 10rpx;
	border: 1px solid #e5e5e5;
	padding: 24rpx;
	display: flex;
	.act-img{
		width: 240rpx;
		height: 128rpx;
		overflow: hidden;
		margin-right: 16rpx;
		flex-shrink: 0;
		.aimg{
			width: 100%;
		}
	}
	.act-info{
		width: 0;
		flex: 1;
		font-size: 24rpx;
		color: #999999;
		.title{
			font-weight: 700;
			color: #000000;
			font-size: 30rpx;
			margin-bottom: 10rpx;
		}
		.time{
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}
		.address{
			display: flex;
			align-items: center;
		}
		.shopname{
			max-width: 200rpx;
			margin-right: 10rpx;
		}
		.icon{
			width: 24rpx;
			margin-right: 10rpx;
		}
	}
}
</style>
